<template>
  <div class="chooseCity">
    <!-- <carnt-header :text="'选择城市'"></carnt-header> -->
    <mt-index-list>
      
      <div class="City">定位城市</div>
      <div class="currentAdd">
        <span @click="locations">
          <img src="../assets/img/chooseCar/address.png">
          {{this.$store.state.cityName}}
        </span>
      </div>
      <div class="City">热门城市</div>
      <div class="hotCity">
        <span v-for="item in citys" v-if="item.IS_HOT=='1'" @click="selectHotCity(item.NAME)">{{item.NAME}}</span>
      </div>
      <mt-index-section v-for="(item,key) in allCity" :index="key" :key="key">
        <mt-cell v-for="(cell,index) in item" :key="index" :class="{active:key==activeKey&&index==activeIndex}" :title="cell.NAME" @click.native="selectCity(cell.NAME,key,index)">
        </mt-cell>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>
<script>
import Vue from 'vue';
import { IndexList, IndexSection, Cell} from 'mint-ui';
import carntHeader from './commonParts/CarntHeader';
Vue.component(Cell.name, Cell);
Vue.component(IndexList.name, IndexList);
Vue.component(IndexSection.name, IndexSection);
export default {
  name: 'chooseCity',
  // 数据
  data () {
    return {
      msg: '选择城市',
      allCity:{"A":[],"B":[],"C":[],"D":[],"E":[],"F":[],"G":[],"H":[],"I":[],"J":[],"K":[],"L":[],"M":[],"N":[],"O":[],"P":[],"Q":[],"R":[],"S":[],"T":[],"U":[],"V":[],"W":[],"X":[],"Y":[],"Z":[]},
      activeIndex:"",
      activeKey:"",
      citys:""
    }
  },
  // 创建
  created () {
      // 创建地址解析器实例
      let _this=this;
      let cityPort=this.$store.state.ip+"/CARNT/CommonServiceWeb/getRegion";
      // 获取当前app所支持的所有城市
      this.$http.post(cityPort,{'CITY_ID':"0"},{emulateJSON: true}).then(function(res){
        _this.citys=res.body.RESULT_DATA;
        console.log(res.body.RESULT_DATA);
        // 将所有城市按字母分类
        for(var index in res.body.RESULT_DATA){
          let item=res.body.RESULT_DATA[index];
          _this.allCity[item.INITIAL].push(item);
        }
        for(var item in _this.allCity){
          if(_this.allCity[item].length==0){
            delete _this.allCity[item];
          }
        }
      });

  },
  // 渲染
  mounted () {

  },
  // 销毁前
  beforeDestory () {

  },
  // 计算
  computed: {

  },
  // 方法
  methods: {
    //定位操作
    locations(){
      let x,y;//x表示经度，y表示纬度
      let geolocation = new BMap.Geolocation();
      let _this=this;
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          console.log('您的位置：'+r.point.lng+','+r.point.lat);
          x=r.point.lng;
          y=r.point.lat;
          let str=x+","+y;
          let geoc = new BMap.Geocoder();
          let point = new BMap.Point(x,y)
          geoc.getLocation(point, function(rs){
            let addComp = rs.addressComponents;
            console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
            let citys=addComp.city.split("").slice(0,addComp.city.length-1).join("");
            _this.$store.commit("alterCity",citys);
            localStorage.setItem("cityName",citys);
            _this.$store.commit("alterLocation",true);
            _this.$store.commit("alterLgnLat",str);
            localStorage.setItem("localLngLat",str);
          });   
        }
        else {
          console.log('failed'+this.getStatus());
        }        
      },{enableHighAccuracy: true})
      
    },
    // 选择城市的操作
    selectCity(city,key,index){
      this.$store.commit("alterCity",city);
      localStorage.setItem("cityName",city);
      this.$store.commit("alterLocation",true);
      this.activeKey=key;
      this.activeIndex=index;
      let _this=this;
      // 根据城市名获取经纬度
      var myGeo = new BMap.Geocoder();
      // 将地址解析结果显示在地图上,并调整地图视野
      myGeo.getPoint(city, function(point){
        if (point) {
          let str=point.lng+","+point.lat;
          console.log(str)
          _this.$store.commit("alterLgnLat",str);
          localStorage.setItem("localLngLat",str);
          _this.$router.push("/");
        }else{
          alert("您选择地址没有解析到结果!");
        }
      }, city);
      setTimeout(function(){
        _this.activeKey="";
        _this.activeIndex=-1;
      },300)
    },
    //选择热门城市
    selectHotCity(city){
      console.log(city);
      this.$store.commit("alterCity",city);
      localStorage.setItem("cityName",city);
      this.$store.commit("alterLocation",true);
      let _this=this;
      // 根据城市名获取经纬度
      var myGeo = new BMap.Geocoder();
      // 将地址解析结果显示在地图上,并调整地图视野
      myGeo.getPoint(city, function(point){
        if (point) {
           let str=point.lng+","+point.lat;
           console.log(str)
           _this.$store.commit("alterLgnLat",str);
           localStorage.setItem("localLngLat",str);
           _this.$router.push("/");
        }else{
          alert("您选择地址没有解析到结果!");
        }
      }, city);
    }
  },
  // 子组件
  components: {
    carntHeader
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.chooseCity{
  text-align: left;
  width:7.5rem;
  background: #fff;
  font-size: .3rem;
  .active{
    //background: rgba(0,0,0,.1);
  }
  .City{
    padding:0px .25rem;
    background:#ddd;
    height: .6rem;
    line-height: .6rem;
    font-size: .28rem;
    color: #656565;
  }
  .currentAdd{
    height: 1.4rem;
    line-height: 1.4rem;
    padding:.2rem;
    span{
      padding-right: .1rem;
    }
  }
  .hotCity{
    padding:.2rem;
  }
  .currentAdd,.hotCity{
    overflow: hidden;
    span{
      display: block;
      float: left;
      width: 1.50rem;
      height: .60rem;
      margin:.2rem .08rem!important;
      line-height: .6rem;
      text-align: center;
      border-radius: .15rem;
      border: 1px solid #000;
      font-size:.3rem;
      color: #000;
      img{
        width: .35rem;
        vertical-align: middle;
        margin-top: -.04rem;
      }
    }
  }
}

</style>
